<template>
  <baseslot :show-btn-box="false">
    <template v-slot:search-box>
      <SearchForm :formConfig="formConfig" :formData="searchlist" @search="search"></SearchForm>
    </template>
    <template v-slot:table-box>
      <div class="seeding-main">
        <div
          v-if="true"
          class="seeding-side"
        >
          <div class="seeding-side-title">选择批次</div>
          <div class="seeding-side-menu">
            <div
              v-for="(item,index) in batchList"
              :key="index"
              class="side-menu-item"
              :class="index === batchindex?'side-menu-item-select':''"
              :title="item.batchName"
              @click="selectbatch(item,index)"
            >
              <!-- {{ item.batchName.substring(0,13) }} -->
              {{ item.batchName }}
            </div>
          </div>
        </div>
        <div class="seeding-right-main">
          <div class="right-main-top">
            <div class="main-top-title">长势图展示</div>
            <div class="main-top-view">
              <div
                v-for="(item,index) in growimagelist"
                :key="index"
                class="show-view-item"
                :class="index === nowgrowimageindex?'show-view-item-slect':''"
                @click="clickGrowImage(item.zhid,index, item)"
              >
                <!-- @click="getdatapictureid(item.zhid,index, item)" -->
                <template v-if="item && item.zhid">
                  <div
                    v-if="item.name"
                    class="view-item-image-name"
                  >{{ item.name }}</div>
                  <img
                    v-if="item.value"
                    v-loading="item.value?true:false"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    :src="item.value"
                    class="view-item-image"
                    :height="setimageheight(index)"
                    :width="setimagewidth(index)"
                  />
                  <div
                    class="view-item-image-time"
                  >{{ item.startTime }}-{{ item.endTime }}</div>
                </template>
              </div>
            </div>
          </div>
          <div class="right-main-center">
            <div class="main-center-title">采集数据图片列表</div>
            <div class="main-camera">
              <i
                class="el-icon-caret-left"
                @click="fnPrev"
              ></i>
              <div
                ref="fixedBox"
                class="camera-conent"
              >
                <div :style="`width:${signleWidth *
                    (CameraList.length)}px;transform:translate(${scrollResultWidth}px,0);transition:1s;`
                    + 'display:flex'">
                  <div
                    v-for="(o,index) in CameraList"
                    :key="index"
                    :class="nowgrowCameraindex === index? 'CameraIndex':''"
                    class="camera-item"
                    @click="clickCamera(o, index)"
                  >{{ o.cameraName }}</div>
                </div>
              </div>
              <i
                class="el-icon-caret-right"
                @click="cameraRight"
              ></i>
            </div>
            <div
              v-if="weatherdata[0]"
              class="main-center-nowdate"
            >{{ weatherdata[0].date }}</div>
            <div class="main-center-data">
              <div
                v-for="(item,index) in weatherdata"
                :key="index"
                class="center-data-item"
              >
                <img
                  class="data-item-img"
                  :src="item.imagurl"
                />
                <div class="data-item-zhi">
                  <div>{{ item.baifenbi }}</div>
                  <div>{{ item.dataname }}</div>
                </div>
                <div
                  v-if="index + 1 < weatherdata.length"
                  class="colum-line"
                ></div>
                <div
                  v-if="index + 1 === weatherdata.length"
                  style="width:2px;height:50px;"
                ></div>
                <!-- <div class="data-item-date">{{ item.date }}</div> -->
              </div>
            </div>
            <div class="main-center-image">
              <div class="pest-main-bottom">
                <div
                  class="pest-bottom-left"
                  @click="minpagesize"
                ></div>
                <div class="pest-bottom-center">
                  <div
                    v-for="(item, index) in centerimageList"
                    :key="index"
                    class="bottom-center-item"
                    :class="imageselectindex === index ?'bottom-center-item-select':''"
                    @click="setimageindex(item,index)"
                  >
                    <div
                      class="testline"
                      @click="showbigimg(item.pictureData)"
                    >查看大图</div>
                    <img
                      class="bottom-center-item-img"
                      :src="item.pictureData"
                    />
                    <div class="bottom-center-item-line">
                      {{ item.collectTime }}
                      <span style="width:10px;"></span>
                      {{ item.collectSettingTime }}
                    </div>
                  </div>
                </div>
                <div
                  class="pest-bottom-right"
                  @click="addpagesize"
                ></div>
              </div>
              <div class="bot-slider">
                <el-slider
                  v-model="currentpage"
                  :show-tooltip="true"
                  :min="1"
                  :max="currentpagemax"
                  @change="getdatapictureid(false, nowgrowimageindex, CameraList[nowgrowCameraindex])"
                />
              </div>
            </div>
          </div>
          <div class="right-main-bottom">
            <div class="main-bottom-title">物联网数据</div>
            <div class="main-bottom-echart">
              <lineechart
                :cdata="cdatatwo"
                :nowwidth="'100%'"
                :nowheight="'200px'"
                :isshowleg="true"
                :font-size="15"
              />
            </div>
          </div>
          <div style="margin-bottom:0px;height:18px;width:100%;"></div>
        </div>
      </div>
    </template>
    <template v-slot:dialog>
      <el-dialog
        class="zh-new-dialog"
        width="1000px"
        :visible.sync="isshowbigimg"
      >
        <img :src="nowselectimgUrl" />
      </el-dialog>
    </template>
  </baseslot>
</template>

<script>
import SearchForm from '@/components/searchForm';
import lineechart from "@/components/Echarts/components/linechart/charttwo.vue";
import baseslot from "@/components/BaseMainSlot/newBaseMainSlot.vue";
import growthRecordreq from "@/api/digital-production/growth-record-management/growth-record-managementtwo/index";
import nowpagereq from "@/api/digital-production/growth-record-management/seedling-growth-analysis";
// import { now } from 'moment';
export default {
  name: "SeedlingGrowthAnalysis",
  components: {
    SearchForm,
    baseslot,
    lineechart,
  },
  data() {
    return {
      formConfig: [
        {
          label: '时间选择',
          prop: 'selectyear',
          type: 'year',
        }
      ],
      searchlist: {},
      selectyear: "",
      // 中间点击图片相关
      nowimagemes: [],
      isshowbigimg: false,
      currentpage: 1,
      currentpagemax: 1,
      currentsize: 4,
      imageselectindex: 0,
      nowgrowCameraindex: "",
      centerimageList: [
        // { name: '11', value: require('@/assets/grow-shuidao/tutu.png') },
        // { name: '11', value: require('@/assets/grow-shuidao/tutu.png') },
        // { name: '22', value: require('@/assets/grow-shuidao/tutu.png') }
      ],
      nowselectimgUrl: "",
      // 长势图
      growimagelist: [
        // { name: '发芽', value: require('@/assets/grow-shuidao/水稻种子发芽.png') },
        // { name: '插秧', value: require('@/assets/grow-shuidao/水稻插秧期.png') },
        // { name: '分叶期', value: require('@/assets/grow-shuidao/水稻分葉期.png') },
        // { name: '拔节期', value: require('@/assets/grow-shuidao/水稻拔节期.png') },
        // { name: '抽穗期', value: require('@/assets/grow-shuidao/水稻抽穗期.png') },
        // { name: '灌浆期', value: require('@/assets/grow-shuidao/水稻灌浆期.png') },
        // { name: '熟期', value: require('@/assets/grow-shuidao/水稻成熟期.png') }
      ],
      nowgrowimageindex: 0,
      // 采集数据
      // 当前选择日期的数据
      weatherdata: [
        // {
        //   imagurl: require('@/assets/grow-shuidao/3.png'),
        //   baifenbi: '47.5%',
        //   dataname: '光照度',
        //   date: '10/5 14:35'
        // },
        // {
        //   imagurl: require('@/assets/grow-shuidao/4.png'),
        //   baifenbi: '37.5%',
        //   dataname: '土壤湿度',
        //   date: '10/5 14:35'
        // },
        // {
        //   imagurl: require('@/assets/grow-shuidao/2.png'),
        //   baifenbi: '52.5%',
        //   dataname: '二氧化碳',
        //   date: '10/5 14:35'
        // },
        // {
        //   imagurl: require('@/assets/grow-shuidao/1.png'),
        //   baifenbi: '67.5%',
        //   dataname: '空气湿度',
        //   date: '10/5 14:35'
        // }
      ],
      batchindex: 0,
      batchList: [
        // { batchName: '2020双季水稻第一批', batchNo: '1' }
      ],
      // datelist: [],
      cdatatwo: {
        xAxisdata: [],
        xData: ["物联网数据"],
        seriesData: []
        // xAxisdata: ["1时", "2时", "3时", "4时", "5时", "6时", "7时", "8时", "9时", "10时"],
        // xData: ["物联网数据"],
        // seriesData: [
        //   {
        //     name: '物联网数据',
        //     type: 'line',
        //     data: [1500, 1454, 2444, 1806, 5349, 3055, 3309, 1430, 3474, 2384],
        //     barWidth: 10,
        //     itemStyle: {
        //       normal: {
        //         barBorderRadius: 5,
        //         color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 1, [
        //           { offset: 0, color: "#04FA99" },
        //           { offset: 1, color: "#3EACE5" }
        //         ])
        //       }
        //     },
        //     z: -12
        //   }
        // ]
      },
      signleWidth: 215, // 单个流程的宽度currentProgressId: '',
      scrollResultWidth: 0, // transform滚动的距离
      activeName: 0,
      currentClickNumber: 0,
      noScrollRight: true,
      CameraList: [],
      firstLoad: true,
    };
  },
  mounted() {
    this.getallbatchList();
  },
  methods: {
    // 新的选择批次-以新用旧
    newselectbat(e) {
      // console.log(e)
      this.selectbatch(this.batchList[e], e);
    },
    // 展示大图
    showbigimg(e) {
      this.isshowbigimg = true;
      this.nowselectimgUrl = e;
    },
    // 获取批次
    getallbatchList() {
      let params = {
        status: 0
      };
      if (this.searchlist.selectyear && this.searchlist.selectyear.length > 0) {
        params.startTime = `${this.searchlist.selectyear}-01-01 00:00:01`;
        params.endTime = `${this.searchlist.selectyear}-12-30 23:59:59`;
      }
      growthRecordreq.getallbatchList(params).then(res => {
        this.batchList = res.data;
        // 默认选择田法林小麦
        let index = this.batchList?.findIndex(el => {
          return el.batchName == '田法林小麦'
        })
        if (index != -1) {
          this.isCAM = true
          this.GrowthCamera(res.data[index]);
          this.batchindex = index;
        } else {
          this.GrowthCamera(res.data[0]);
        }
      });
    },
    // 获取长势图相关信息
    async getgrowtop(e) {
      this.growimagelist = [];
      let varietyNo = this.batchList[this.batchindex].varietyNo;
      // let plantdata = await nowpagereq.queryByPlantVarietyNo(varietyNo)
      let plantdata = await nowpagereq.queryGrowthPhaseNoByBatchNo(
        this.batchList[this.batchindex].batchNo
      );
      let nowplantid = plantdata.data;
      if (!nowplantid) {
        this.nowgrowimageindex = 0;
      }
      let zhres = await nowpagereq.getgrowtop(varietyNo);
      let oldlist = zhres.data;
      this.oldlist = oldlist
      let zholdlist = [];
      let hassetindex = false;
      await oldlist.forEach(async (item, index) => {
        // let imgmes = await nowpagereq.getgrowtopimgs(item.pictureNo)
        // let newpicture = imgmes.data
        // if (newpicture) {
        let pusobj = {
          pictureNo: item.pictureNo,
          zhid: item.growthPhaseNo,
          growthPhaseNo: item.growthPhaseNo,
          name: item.growthPhaseName || "",
          cameraId: e?.cameraId
          // value: `data:image/png;base64,${newpicture.pictureData}`
        };
        this.$set(zholdlist, index, pusobj);
        // zholdlist.push(pusobj)
        // }
        // if (nowplantid && item.growthPhaseNo === nowplantid && !hassetindex) {
        //   hassetindex = true
        //   this.nowgrowimageindex = index
        //   let zhgrowthPhaseNo = nowplantid
        //   this.getdatapictureid(zhgrowthPhaseNo, this.nowgrowimageindex)
        // }
      });
      zholdlist.forEach(async (item, index) => {
        let imgmes = await nowpagereq.getgrowtopimgs(item.pictureNo);
        let newpicture = imgmes.data;
        this.$set(
          item,
          "value",
          `data:image/png;base64,${newpicture.pictureData}`
        );
        // if (newpicture) {
        //   let pusobj = {
        //     pictureNo: item.pictureNo,
        //     zhid: item.growthPhaseNo,
        //     name: item.growthPhaseName || '',
        //     value: `data:image/png;base64,${newpicture.pictureData}`
        //   }
        //   this.$set(zholdlist, index, pusobj)
        //   // zholdlist.push(pusobj)
        // }
        if (nowplantid && item.growthPhaseNo === nowplantid && !hassetindex) {
          hassetindex = true;
          this.nowgrowimageindex = index;
          this.getaxiosechart(e);
          let zhgrowthPhaseNo = nowplantid;
          this.zhgrowthPhaseNo = zhgrowthPhaseNo
          this.getdatapictureid(zhgrowthPhaseNo, this.nowgrowimageindex, e);
        }
      });
      zholdlist.map((el, index) => {
        let co = 0
        for (let i = 0; i < index; i++) {
          oldlist[i].cycle && (co += oldlist[i].cycle)
        }
        let endCo = co + (oldlist[index].cycle || 0)
        let startTime = new Date(this.startDate.getTime() + 1000 * 60 * 60 * 24 * parseInt(co))
        let endTime = new Date(this.startDate.getTime() + 1000 * 60 * 60 * 24 * parseInt(endCo))
        el.startTime = startTime.getFullYear()+'.'+(startTime.getMonth()+1)+'.'+startTime.getDate()
        el.endTime = endTime.getFullYear()+'.'+(endTime.getMonth()+1)+'.'+endTime.getDate()
      })
      this.growimagelist = zholdlist;
    },
    // 获取中间可分页的图片
    async getdatapictureid(zhgrowthPhaseNo, zhnewi, e) {
      if (zhnewi) {
        this.nowgrowimageindex = zhnewi;
        // console.log("中" + zhgrowthPhaseNo)
      } else {
        this.nowgrowimageindex = 0;
      }
      this.centerimageList = [];
      let paramsone = {
        pageSize: 3,
        batchNo: this.batchList[this.batchindex].batchNo,
        growthPhaseNo: zhgrowthPhaseNo,
        cameraId: e?.cameraId
      };
      if (zhgrowthPhaseNo) {
        let resone = await nowpagereq.newgetdatapictureid(paramsone);
        if (resone.data.currentPage) {
          this.currentpage = Number(resone.data.currentPage);
          this.currentpagemax = Number(resone.data.totalPages);
        }
      }
      // jg的田法林小麦
      if (this.firstLoad && sessionStorage.account === 'jg' && e?.cameraId == 32
        && this.batchList[this.batchindex].batchName === '田法林小麦') {
        this.firstLoad = false
        this.currentpage = 221;
      }
      let paramstwo = {
        page: this.currentpage,
        size: 3,
        entity: {
          batchNo: this.batchList[this.batchindex].batchNo,
          cameraId: e?.cameraId
        }
      };
      let res = await nowpagereq.getdatapictureid(paramstwo);
      let list = res.data.content;
      // this.currentpagemax = res.data.totalPages
      if (list && list.length > 0) {
        list.forEach(async (item, index) => {
          let resone = await nowpagereq.getpicmesbypicid(item.pictureNo);
          let restwo = await nowpagereq.getdataitembycollid(
            item.collectRecordNo
          );
          if (resone.data) {
            let newurl = "data:image/png;base64," + resone.data.pictureData;
            this.$set(list[index], "pictureData", newurl);
            // list[index]["pictureData"] = 'data:image/png;base64,' + resone.data.picture
          } else {
            list[index][
              "pictureData"
            ] = require("@/assets/oth-img/index-bgc.png");
          }
          if (restwo.data && restwo.data.length > 0) {
            list[index]["dataItemList"] = JSON.parse(
              JSON.stringify(restwo.data)
            );
          }
          if (index === 0) {
            this.setimageindex(this.centerimageList[0], 0);
          }
        });
      }
      this.centerimageList = list;
      // console.log(list)
    },
    // 获取echart图
    async getaxiosechart(e) {
      this.cameraInfo = e
      // 临时演示
      this.weatherdata = [];
      this.cdatatwo = {
        xAxisdata: [],
        xData: [],
        seriesData: [],
        rightShow: true
      };
      let co = 0
      for (let i = 0; i < this.nowgrowimageindex; i++) {
        this.oldlist[i].cycle && (co += this.oldlist[i].cycle)
      }
      let endCo = co + (this.oldlist[this.nowgrowimageindex].cycle || 0)
      let beginTime = new Date(this.startDate.getTime() + 1000 * 60 * 60 * 24 * parseInt(co))
      let endTime = new Date(this.startDate.getTime() + 1000 * 60 * 60 * 24 * parseInt(endCo))

      let nowbatchNo = this.batchList[this.batchindex]["batchNo"];
      if (!e?.cameraId) return
      let resone = await nowpagereq.getdataitemlist(nowbatchNo, e?.cameraId);
      if (resone.data) {
        resone.data.forEach(async (item, index) => {
          if (item.dataItemId === 5027) {
            return;
          }
          let zhrestwo = await nowpagereq.getdatabydataitemid({
            batchNo: nowbatchNo,
            dataItemId: item.dataItemId,
            cameraId: e?.cameraId,
            beginTime: this.dateToFormattwo(beginTime),
            endTime: this.dateToFormattwo(endTime),
          });
          let list = [];
          zhrestwo.data.date.forEach(item => {
            list.push(this.dateToFormat(item));
          });
          this.cdatatwo.xAxisdata = list;
          this.cdatatwo.xData.push(item.dataItemName);

          if (item.dataItemName.indexOf("光照度") !== -1) {
            this.cdatatwo.xData.push(item.dataItemName);
            this.cdatatwo.seriesData.push({
              name: item.dataItemName,
              type: "line",
              symbol: "none",
              smooth: true,
              data: zhrestwo.data.data,
              yAxisIndex: "1"
            });
          } else {
            this.cdatatwo.xData.push(item.dataItemName);
            this.cdatatwo.seriesData.push({
              symbol: "none",
              smooth: true,
              name: item.dataItemName,
              type: "line",
              data: zhrestwo.data.data,
              yAxisIndex: "0"
            });
          }
        });
      }
    },

    // 点击上一个
    fnPrev() {
      if (this.nowgrowCameraindex > 0) {
        this.nowgrowCameraindex = --this.nowgrowCameraindex;
        this.clickCamera(
          this.CameraList[this.nowgrowCameraindex],
          this.nowgrowCameraindex
        );
      } else {
        this.$message.warning("已经到了第一个摄像头了");
      }
      // 如果右点击的次数大于0，才可以左滚
      if (this.currentClickNumber > 0) {
        this.currentClickNumber -= 1;
        this.noScrollRight = true;
        this.fnScrollWidth("reduce");
      } else {
        return false;
      }
    },
    // 点击下一个

    cameraRight() {
      const currentScrollWidth = this.$refs[`fixedBox`].clientWidth;
      const canNumber = Math.floor(currentScrollWidth / this.signleWidth); // 可以放下的个数
      // 如果最后一个流程图标已经展示出来，则停止滚动

      // console.log('')
      if (this.nowgrowCameraindex < this.CameraList.length - 1) {
        this.nowgrowCameraindex = ++this.nowgrowCameraindex;
        // console.log(this.nowgrowCameraindex);
        this.clickCamera(
          this.CameraList[this.nowgrowCameraindex],
          this.nowgrowCameraindex
        );
      } else {
        this.$message.warning("已经到了最后一个摄像头了");
      }
      if (this.currentClickNumber + canNumber >= this.CameraList.length) {
        return;
      }
      // 说明放不下有滚动条
      if (canNumber < this.CameraList.length) {
        this.currentClickNumber += 1;
        if (this.currentClickNumber + canNumber >= this.CameraList.length) {
          this.noScrollRight = false;
        }
        this.fnScrollWidth("add");
      }
    },
    // translate的宽度
    fnScrollWidth(type) {
      let result = 0;
      if (type === "reduce") {
        result = 215;
      } else if (type === "add") {
        result = -215;
      } else {
        result = 0;
      }
      console.log(result);
      this.scrollResultWidth += result;
    },
    // 下一页
    addpagesize() {
      this.currentpage = this.currentpage + 1;
      if (this.currentpage > this.currentpagemax) {
        this.$message.warning("已经到最后一页了");
        return;
      }
      this.getdatapictureid(
        false,
        this.nowgrowimageindex,
        this.CameraList[this.nowgrowCameraindex]
      );
      // this.getimagemessage(this.insectDeviceId)
      this.$message.success("下一页获取成功");
    },
    // 上一页
    minpagesize() {
      this.currentpage = this.currentpage - 1;
      if (this.currentpage < 1) {
        this.currentpage = 1;
        this.$message.warning("页数已为1");
        return;
      }
      this.getdatapictureid(
        false,
        this.nowgrowimageindex,
        this.CameraList[this.nowgrowCameraindex]
      );
      // this.getdatapictureid()
      // this.getimagemessage(this.insectDeviceId)
      this.$message.success("上一页获取成功");
    },
    setimageindex(e, i) {
      let testlist = JSON.parse(JSON.stringify(e));
      this.nowimagemes = testlist.dataItemList;
      this.weatherdata = [];
      // console.log(testlist.dataItemList)
      if (testlist.dataItemList && testlist.dataItemList.length > 0) {
        testlist.dataItemList.forEach(item => {
          let parlist = {
            imagurl: require("@/assets/grow-shuidao/4.png"),
            baifenbi: item.dataItemValue + item.symbol,
            dataname: item.dataTypeName,
            date: this.zhdata(item.collectDataTime)
          };
          switch (item.dataTypeId) {
            case 55:
              // 酸碱度
              parlist.imagurl = require("@/assets/grow-shuidao/6.png");
              break;
            case 14:
              // 光照度
              parlist.imagurl = require("@/assets/grow-shuidao/3.png");
              break;
            case 13:
              // 空气湿度
              parlist.imagurl = require("@/assets/grow-shuidao/5.png");
              break;
            case 12:
              // 空气温度
              parlist.imagurl = require("@/assets/grow-shuidao/1.png");
              break;
            case 11:
              // 土壤湿度
              parlist.imagurl = require("@/assets/grow-shuidao/4.png");
              break;
            default:
              parlist.imagurl = require("@/assets/grow-shuidao/2.png");
              break;
          }
          this.weatherdata.push(parlist);
          // console.log(parlist)
        });
      } else {
        this.weatherdata = [
          {
            imagurl: require("@/assets/grow-shuidao/3.png"),
            baifenbi: "-%",
            dataname: "光照度",
            date: "01/31 14:35"
          },
          {
            imagurl: require("@/assets/grow-shuidao/4.png"),
            baifenbi: "-°C",
            dataname: "土壤温度",
            date: "01/31 14:35"
          },
          {
            imagurl: require("@/assets/grow-shuidao/2.png"),
            baifenbi: "-%",
            dataname: "二氧化碳",
            date: "01/31 14:35"
          },
          {
            imagurl: require("@/assets/grow-shuidao/1.png"),
            baifenbi: "-°C",
            dataname: "空气温度",
            date: "01/31 14:35"
          },
          {
            imagurl: require("@/assets/grow-shuidao/5.png"),
            baifenbi: "-%",
            dataname: "空气湿度",
            date: "01/31 14:35"
          }
        ];
      }
      this.imageselectindex = i;
    },
    setimageheight(i) {
      let zhheight = 60 + 20 * i;
      return zhheight + "px";
    },
    setimagewidth(i) {
      let zhwidth = 30 + 20 * i;
      return zhwidth + "px";
    },
    // 时间转化方法
    zhdata(originDate) {
      const dt = new Date(originDate);
      // const y = dt.getFullYear();
      const m = (dt.getMonth() + 1 + "").padStart(2, "0");
      const d = (dt.getDate() + "").padStart(2, "0");
      const hh = (dt.getHours() + "").padStart(2, "0");
      const mm = (dt.getMinutes() + "").padStart(2, "0");
      // const ss = (dt.getSeconds() + "").padStart(2, "0");
      return `${m}/${d} ${hh}:${mm}`;
    },
    // 批次选择
    selectbatch (e, i) {
      this.firstLoad = true
      let newTime = new Date(e.assetDate).getTime() - 1000 * 60 * 60 * 24 * parseInt(e.completionDays)
      this.startDate = new Date(newTime)
      this.growimagelist = [];
      this.currentpage = 1;
      this.batchindex = i;
      this.GrowthCamera(e);
      // this.getgrowtop()
      // this.getdatapictureid()
      // this.getaxiosechart()
    },
    async GrowthCamera(e) {
      let resone = await nowpagereq.GrowthCameraBatch(e.batchNo);
      if (resone.code === 1) {
        let newTime = new Date(e.assetDate).getTime() - 1000 * 60 * 60 * 24 * parseInt(e.completionDays)
        this.startDate = new Date(newTime)

        this.CameraList = resone.data;

        // jg账号陈阿毛水稻 默认摄像头为'监控点1-枪机1'
        let index = this.CameraList?.findIndex(el => {
          return el.cameraName == '监控点1-枪机1'
        })
        if (this.isCAM && index != -1) {
          await this.getgrowtop(this.CameraList[index]);
          this.nowgrowCameraindex = index;
        } else {
          await this.getgrowtop(this.CameraList[0]);
          this.nowgrowCameraindex = 0;
        }
        // await this.getdatapictureid(false, false, this.CameraList[0])
        // await this.getaxiosechart(this.CameraList[0]);
      }
    },
    clickCamera(e, index) {
      this.getdatapictureid(this.zhgrowthPhaseNo, this.nowgrowimageindex, e);
      // this.getgrowtop(e)
      this.nowgrowCameraindex = index;
      this.cameraInfo = e
      this.getaxiosechart(e);
    },
    clickGrowImage(id, index, item) {
      this.getdatapictureid(id, index, item);
      console.log(index, item)
      this.getaxiosechart(this.cameraInfo);
    },
    // 搜索
    search(searchlist) {
      this.searchlist = searchlist
      this.batchList = [];
      this.getallbatchList();
    }
  }
};
</script>

<style lang="scss" scoped>
.seeding-main {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.seeding-side {
  width: 200px;
  // height: 100%;
  color: #fff;
  background-color: #094054;
  .seeding-side-title {
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    border-bottom: #fff 1px dashed;
    margin-bottom: 10px;
  }
  .seeding-side-menu {
    width: 200px;
    max-height: calc(100% - 51px);
    border: #fff 1px solid;
    overflow-y: auto;
    overflow-x: hidden;
    // overflow: auto;
    .side-menu-item {
      width: 200px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 14px;
      border-bottom: #fff 1px solid;
      white-space: nowrap;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0 20px;
    }
    .side-menu-item-select {
      background-image: linear-gradient(to bottom, #75efd2, #44cec6, #0fa2ba);
    }
  }
}
.seeding-right-main {
  width: calc(100% - 210px);
  // width: calc(100%);
  height: 100%;
  // margin-bottom: 20px;
  overflow: hidden auto;
  // border: springgreen 1px solid;

  .main-camera {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    i {
      display: inline-block;
      background-color: #155f70;
      border: 1px solid #34eee000;
      height: 100%;
      padding: 9px 2px;
      font-size: 16px;
      color: #34eee0;
      box-sizing: border-box;
      cursor: pointer;
      &:hover {
        color: #34eee0;
        border: 1px solid #34eee0;
      }
    }
    .camera-conent {
      width: calc(100% - 64px);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      overflow-x: hidden;
      margin-right: 5px;
      .camera-item {
        border: 1px solid #34eee0;
        margin-right: 5px;
        margin-left: 5px;
        padding: 8px 20px;
        color: #34eee0;
        font-weight: 400;
        white-space: nowrap;
        cursor: pointer;
        &:hover {
          background: #34eee0;
          color: #000;
        }
      }
      .CameraIndex {
        background: #34eee0;
        color: #000;
      }
    }
  }
  .right-main-top {
    width: 100%;
    height: 340px;
    margin-bottom: 10px;
    background-color: #094054;
    .main-top-title {
      width: 100%;
      height: 40px;
      text-align: center;
      line-height: 40px;
      font-weight: 600;
      font-size: 18px;
    }
    .main-top-view {
      width: 100%;
      height: 310px;
      display: flex;
      flex-wrap: nowrap;
      // align-items: center;
      justify-content: space-around;
      .show-view-item {
        width: 160px;
        height: 300px;
        cursor: pointer;
        background-size: 160px 260px;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        position: relative;
        .view-item-image-time {
          width: 100%;
          height: 26px;
          line-height: 26px;
          text-align: center;
          background: url("~@/assets/growthmodel/timebg.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          position: absolute;
          top: 45px;
          left: 0;
          white-space: nowrap;
          font-size: 13px;
        }
        .view-item-image {
          margin-top: 50px;
          max-height: 180px;
          height: auto;
          // width: 150px;
          // height: 180px;
        }
        .view-item-image-name {
          width: 150px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-weight: 600;
        }
      }
      .show-view-item-slect {
        background-image: url("~@/assets/grow-shuidao/kuangkuang.png");
      }
    }
  }
  .right-main-center {
    width: 100%;
    height: 414px;
    margin-bottom: 10px;
    background-color: #094054;
    .main-center-title {
      width: 100%;
      text-align: center;
      height: 30px;
      line-height: 30px;
      font-size: 18px;
      font-weight: 600;
    }
    .main-center-nowdate {
      margin-left: 5%;
      width: 200px;
    }
    .main-center-data {
      margin: 5px 5%;
      width: 90%;
      height: 80px;
      border: #2a5c6c dashed 1px;
      display: flex;
      // overflow-y: auto;
      justify-content: space-around;
      .center-data-item {
        width: 230px;
        height: 80px;
        // border: solid 1px #fff;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .data-item-img {
          max-width: 50px;
          max-height: 50px;
        }
        .data-item-zhi {
          font-weight: 600;
        }
        .colum-line {
          width: 2px;
          height: 50px;
          background-image: linear-gradient(#094054, #fff, #094054);
        }
        // .data-item-date{
        // }
      }
      .center-data-item:nth-child(1) {
        margin-left: 10px;
      }
    }
    .main-center-image {
      width: 100%;
      height: 300px;
      cursor: pointer;
      .bot-slider {
        width: calc(97.5% - 160px);
        margin-left: calc(2% + 85px);
        ::v-deep .el-slider__bar {
          background-color: #00c69e;
        }
      }
    }
  }
  .right-main-bottom {
    width: 100%;
    height: 250px;
    margin-bottom: 10px;
    background-color: #094054;
    .main-bottom-title {
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 18px;
      font-weight: 600;
    }
    .main-bottom-echart {
      width: 100%;
      height: 210px;
      padding-left: 10px;
      padding-top: 10px;
    }
  }
}
.pest-main-bottom {
  width: 97.5%;
  margin-left: 2%;
  margin-top: 10px;
  height: 200px;
  min-height: 100px;
  overflow: auto;
  // border: solid 1px #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .pest-bottom-left {
    width: 60px;
    height: 60px;
    margin-left: 10px;
    background-image: url("~@/assets/sxw-pest/left.png");
    background-repeat: no-repeat;
    background-size: 60px;
    cursor: pointer;
  }
  .pest-bottom-center {
    width: calc(100% - 160px);
    height: 180px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .bottom-center-item {
      box-sizing: border-box;
      width: 25%;
      height: 180px;
      border: teal 1px solid;
      position: relative;
      // display: flex;
      // align-items: center;
      .bottom-center-item-img {
        width: 100%;
        height: 178px;
      }
      .testline {
        display: none;
        width: 100%;
        text-align: center;
        height: 50px;
        line-height: 50px;
        position: absolute;
        top: 65px;
      }
      .testline:hover {
        color: cyan;
      }
      .bottom-center-item-line {
        position: relative;
        bottom: 44px;
        height: 40px;
        line-height: 40px;
        width: 100%;
        background-color: rgba(72, 88, 99, 0.7);
        color: cornsilk;
        text-align: center;
        font-size: 18px;
      }
    }
    .bottom-center-item-select {
      border: #00c69e 4px solid;
      height: 187px !important;
    }
    .bottom-center-item:hover {
      .testline {
        display: block;
      }
    }
  }
  .pest-bottom-right {
    width: 60px;
    height: 60px;
    margin-right: 10px;
    background-image: url("~@/assets/sxw-pest/right.png");
    background-repeat: no-repeat;
    background-size: 60px;
    cursor: pointer;
  }
}
::v-deep .el-dialog {
  .el-dialog__header {
    background-color: #006e91;
  }
  .el-dialog__title {
    color: #fff;
  }

  border: none !important;
  .el-dialog__body {
    padding: 30px 20px !important;
    // background-color:  #006e91;
    img {
      width: 100%;
    }
  }
}
// .el-dialog__wrapper .el-dialog{
//    border: #23fff8 1px solid;
// }
.staff-manage {
  overflow: hidden;
}
</style>
